<template>
  <view class="list-item">
    <view class="file-name">{{ item.name }}</view>
    <view :class="onlyShow ? 'btn-group-100' : 'btn-group-200'">
      <u-button
        type="primary"
        size="mini"
        plain
        :loading="loading"
        @click="preview(item)"
        >预览</u-button
      >
      <u-button
        v-if="!onlyShow"
        type="error"
        size="mini"
        class="u-m-l-10"
        plain
        @click="remove(item)"
        >删除</u-button
      >
    </view>
  </view>
</template>
<script lang="ts" setup>
import { getUploadUrl } from '@/utils/env';
import { useUserStore } from '@/stores/user';

const emits = defineEmits(['remove']);
const userStore = useUserStore();
const orgInfo = userStore.getOrgInfo;
const props = defineProps<{
  onlyShow?: boolean;
  item: any;
}>();

const { item } = props;

const remove = (el: any) => {
  emits('remove', el);
};
// 预览
const loading = ref(false);
const preview = (item: any) => {
  const timestamp = new Date().getTime();
  loading.value = true;
  uni.downloadFile({
    url: `${getUploadUrl()}/Rest/doc/file/filePreview?timestamp=${timestamp}&orgId=${
      orgInfo.orgId
    }&docId=${item.uid}`,
    success: function (res: any) {
      console.log(res);
      loading.value = false;
      const FILE_NAME_REGX: any = /.*filename=([\w%-_.]+(.\w+)?)/;
      const contentDisposition = res.header['Content-disposition'];
      const fileName = FILE_NAME_REGX.test(contentDisposition)
        ? FILE_NAME_REGX.exec(contentDisposition)[1]
        : 'fileName.txt';
      const type = fileName.split('.');
      var filePath = res.tempFilePath;
      const imgTypeArr = [
        'bmp',
        'jpg',
        'png',
        'tif',
        'gif',
        'pcx',
        'tga',
        'exif',
        'fpx',
        'svg',
        'psd',
        'cdr',
        'pcd',
        'dxf',
        'ufo',
        'eps',
        'ai',
        'raw',
        'WMF',
        'webp',
        'avif',
        'apng',
      ];
      if (
        ['doc', 'xls', 'ppt', 'pdf', 'docx', 'xlsx', 'pptx', 'txt'].includes(
          type[type.length - 1].toLowerCase()
        )
      ) {
        // uni.openDocument({
        //   filePath: filePath,
        //   fileType: type[type.length - 1].toLowerCase(),
        //   // showMenu: true,
        //   success: function (res) {
        //     console.log('打开文档成功');
        //   },
        // });
        // } else if (type[type.length - 1].toLowerCase() === 'txt') {
        const href =
          'https://ow365.cn/?i=17462&ssl=1&furl=' +
          `${getUploadUrl()}/Rest/doc/file/filePreview?timestamp=${timestamp}&&orgId=${
            orgInfo.orgId
          }&docId=${item.uid}`;
        uni.setStorageSync('signHref', href);
        (uni as any).$Router.push({
          name: 'autograph',
        });
      } else if (imgTypeArr.includes(type[type.length - 1].toLowerCase())) {
        uni.previewImage({
          urls: [res.tempFilePath],
        });
      }
    },
  });
};
</script>
<style lang="scss">
.list-item {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;

  .file-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    // width: 480rpx;
  }
  .btn-group-200 {
    width: 200rpx;
  }
  .btn-group-100 {
    width: 100rpx;
  }
}
</style>
